<template>
  <div class="out">
    <div class="top">
            <span class="logo" >
                网站首页
            </span>
      <span class="search">
                <el-input
                  placeholder="请输入"
                  icon="search"
                  v-model="searchCriteria"
                  :on-icon-click="handleIconClick">
                </el-input>
            </span>
      <el-button class="searchButton" type="primary" icon="el-icon-search">搜索</el-button>
      <span class="userInfo">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link" style="color:white">
              admin<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
    </div>

    <div style="margin-top:5px">
      <el-row :gutter="0">
        <el-col :xs="4" :sm="4" :md="4" :lg="4">
          <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
            <template v-for="item in items">
              <template v-if="item.subs">
                <el-submenu :index="item.index">
                  <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
                  <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
                  </el-menu-item>
                </el-submenu>
              </template>
              <template v-else>
                <el-menu-item :index="item.index">
                  <i :class="item.icon"></i>{{ item.title }}
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-col>
        <el-col :xs="20" :sm="20" :md="20" :lg="20">
          <div class="content">
            <el-breadcrumb separator="/">
              <router-view></router-view>
            </el-breadcrumb>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        searchCriteria: '猎场',
        items: [
          {
            icon: 'el-icon-setting',
            index: 'home',
            title: '主页'
          },
          {
            icon: 'el-icon-menu',
            index: '2',
            title: '人员',
            subs: [
              {
                index: 'user',
                title: '用户'
              },
              {
                index: 'role',
                title: '角色'
              },
              {
                index: 'qua',
                title: '权限'
              }
            ]
          },
          {
            icon: 'el-icon-date',
            index: '3',
            title: '表单',
            subs: [
              {
                index: 'baseform',
                title: '基本表单'
              },
              {
                index: 'vueeditor',
                title: '编辑器'
              },
              {
                index: 'markdown',
                title: 'markdown'
              },
              {
                index: 'upload',
                title: '文件上传'
              }
            ]
          },
          {
            icon: 'el-icon-star-on',
            index: 'basecharts',
            title: '图表'
          },
          {
            icon: 'el-icon-upload2',
            index: 'drag',
            title: '拖拽'
          }
        ]
      }
    },
    computed:{
      onRoutes(){
        return this.$route.path.replace('/','');
      }
    },
    methods:{
      handleIconClick(ev) {
        console.log(ev);
      }
    },
  }
</script>
<style>
  .out{
    background-color: #EBEBEB;
    height: 100%;
  }
  .top{
    width:100%;
    background-color: #636363;
    overflow: hidden;
    position:relative;
  }
  .logo{
    float:left;
    padding-top:10px;
    color:white;margin-left:1%
  }
  .search{
    float:left;
    padding:5px;
    color:white;
    margin-left:2%;
    width:15%
  }
  .searchButton{
    height:39px;
    position:absolute;
    top:12%;
  }
  .userInfo{
    float:right;
    padding-top:10px;
    margin-right:1%;
    cursor: pointer;
  }
  .content{
    border: 1px solid #A6A6A6;
    border-radius:6px;
    padding:5px;
    margin:2px;
    background-color: white
  }
</style>
